<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>博客标签片</title>
		<link rel="stylesheet" th:href="@{/layui/css/layui.css}" />
		<script type="text/jscript" th:src="@{/layui/layui.js}"></script>
		<style type="text/css">
			.tips {
				width: 250px;
				/* height: 300px; */
				border: 1px solid #E0E0E0;
				background-color: white;
				/* float: left; */
				margin-bottom: 20px;
			}

			.tips h3 {
				padding: 10px;
				border-bottom: 1px solid #999;
			}

			.tips h3::before {
				display: inline-block;
				margin-right: 8px;
				content: '';
				width: 4px;
				height: 22px;
				vertical-align: -6px;
				background-color: #ca0c16;
			}
			.newArtice{
				padding: 10px 0;
			}
			.newArtice li{
				padding: 5px 20px;
				width: 200px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.newArtice li span{
				float: right;
			}
			.newArtice a{
				cursor: pointer;
			}
			.newArtice a:hover{
				color: #FF0000;
			}
		</style>
	</head>
	<body th:fragment="blogtip(newblogs,hotblogs,newcoms)">
		<div class="tips tip1">
			<h3>最新文章</h3>
			<ul class="newArtice" th:if="${newblogs!=null}">
				<li th:each="blog,blogStat:${newblogs}" th:if="${blogStat.count} le 3">
					<a th:href="@{'/Blog/blogdetail/'+${blog.bid}}" th:text="${blog.title}"></a>
					<span th:text="'阅读数：'+${blog.browseNumber}">阅读数：5k</span>
				</li>
			</ul>
		</div>
		<!--<div class="tips tip2">-->
			<!--<h3>归档</h3>-->
		<!--</div>-->
		<div class="tips tip3">
			<h3>热门文章</h3>
			<ul class="newArtice" th:if="${hotblogs!=null}">
				<li th:each="blog,blogStat:${hotblogs}" th:if="${blogStat.count} le 3">
					<a th:href="@{'/Blog/blogdetail/'+${blog.bid}}" th:text="${blog.title}"></a>
					<span th:text="'阅读数：'+${blog.browseNumber}">阅读数：5k</span>
				</li>
			</ul>
		</div>
		<div class="tips tip4">
			<h3>最新评论</h3>
			<ul class="newArtice" th:if="${newcoms!=null}">
				<li th:each="com,comStat:${newcoms}" th:if="${comStat.count} le 3">
					<a th:text="${com.content}"></a>
				</li>
			</ul>
		</div>
	</body>
</html>
